<template>
  <div>
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />

    <div class="bootm-one">
      <!-- 左侧导航栏 -->
      <van-sidebar v-model="activeKey" >
        <van-sidebar-item
          :title="item.name"
          v-for="item in leftArr"
          :key="item.id"
          @click="onChange(item.id)"
        />
      </van-sidebar>
      <!-- 右边 -->
      <div class="right">
        <img :src="rightArr.banner_url" alt="" />
        <h3>--{{ rightArr.name }}--</h3>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in rightArr.subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
//引入分类页 请求
import { GetThree ,GetThree1 } from "@/utils/http";
export default {
  name: "Fenlei",
  data() {
    return {
      value: "", //搜索框内容
      activeKey: 0, //左侧导航的索引
      leftArr: [], //左侧栏数据
      rightArr: {}, //右边数据 对象形式
    };
  },
  created() {
    this.ThreeDay()
  },
  methods: {
    onChange(id) {
      //this.activeKey = id;
      //console.log(id);
        GetThree1({id:id}).then(res=>{
            //console.log(res);
            this.rightArr=res.data.data.currentCategory
        }).catch((e)=>{
            console.log(e);
        })
         
    },
    ThreeDay() {
      GetThree().then((res) => {
        //console.log(res);
        //左侧栏
        const { categoryList, currentCategory } = res.data.data;
        this.leftArr = categoryList;
        //右边
        this.rightArr = currentCategory;
      });
    },
  },
};
</script>

<style lang='less' scope>
.bootm-one {
  display: flex;
  .right {
    flex: 1;
    img {
      width: 100%;
    }
  }
}
</style>